<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>尺寸和位置操作</title>
  <script src="./js/jquery.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    div {
      width: 300px;
      height: 300px;
      background-color: pink;
      position: absolute;
      padding: 10px;
      top: 50px;
      left: 100px;
      margin-left: 800px;
      border: 50px solid red;
    }

    header {
      width: 60px;
      height: 60px;
      background-color: salmon;
    }
  </style>
</head>
<!-- 
  height([val|fn])
  width([val|fn])
    取得匹配元素当前计算的高度/宽度值（px）
  innerHeight()
  innerWidth()
    能获取到内边距
    获取第一个匹配元素内部区域高度/宽度（包括补白、不包括边框）。
    此方法对可见和隐藏元素均有效。
  outerHeight([options])
  outerWidth([options])
    获取第一个匹配元素外部高度/宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。
    设置为 true 时，计算边距在内。
 -->
<!-- 
  offset()
    left
    top
    作用:获取元素距离窗口的偏移位置
  position()
    作用:获取元素距离定位元素的偏移位
    只能获取不能设置
-->
<!-- 
  补充offsetParent作用获取到父元素
 -->

<body>
  <button>获取</button>
  <button>位置</button>
  <button>设置</button>
  <div>
    <header></header>
  </div>
</body>
<script>
  "use strict";
  $(function () {
    const dv = $("div");
    $("button").eq(0).click(function () {
      console.log(dv.width());
      console.log(dv.innerWidth());
      console.log(dv.outerWidth());
      console.log(dv.outerWidth(true));
    });
    $("button").eq(1).click(function () {
      console.log($("header").offset());
      console.log($("header").offsetParent());
      console.log($("header").position());
    });
    $("button").eq(2).click(function () {
      dv.offset({
        left: "100"
      });
    });
  });
</script>

</html>